<template>
  <div>
    <div class="contentTopTitle">
      <div class="title">预算编制详情</div>
    </div>
    <div class="operation">
      <el-form :inline="true" size="mini">
        <!-- <el-form-item label="账期" label-width="80px">
          <el-date-picker
            v-model="form.acctMonth"
            type="year"
            placeholder="选择账期"
            value-format="yyyy"
            :clearable="false"
          ></el-date-picker>
        </el-form-item> -->
        <el-form-item>
          <!-- <el-button size="mini" type="primary" @click="handle_search()"
            >查询</el-button
          > -->
          <el-button size="mini" type="warning" @click="handle_export()"
            >导出</el-button
          >
          <el-button size="mini" type="" @click="$router.back()"
            >返回</el-button
          >
        </el-form-item>
      </el-form>
      <div class="tableBox">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          style="width: 100%"
          class="tableTh28"
          height="65vh"
          border
          stripe
          ref="table"
        >
          <el-table-column prop="templateName" label="指标" align="center" min-width="120" />
          <el-table-column 
            v-for="(item, i) in columns"
            :key="i" 
            :prop="item.prop" 
            :label="item.label" 
            align="center" 
            :min-width="item.minWidth"
          >
            <el-table-column 
              v-for="child in item.children" 
              :key="child.prop"
              :prop="child.prop" 
              :label="child.label" 
              align="center" 
              min-width="80"
            /> 
          </el-table-column>
        </el-table>
      </div>
    </div>
    <ImportDialog ref="importDialog" @refresh="getList"></ImportDialog>
    <ModifyDialog ref="modifyDialog" @refresh="getList"></ModifyDialog>
  </div>
</template>
<script>
import { $budgetAPI } from "@/api";
import { getCookie } from "@/common/js/cookie";
import { downLoadExcelParams } from "@/utils/zipdownload.js"
export default {
  components: {
    ImportDialog: () => import("./components/importDialog"),
    ModifyDialog: () => import("./components/modifyDialog"),
  },
  data() {
    return {
      form: {
        acctMonth: "",
        areaId: null
      },
      tableData: [],
      columns: [],
      tableLoading: false,
    };
  },
  created() {
    const { areaId, acctMonth } = this.$route.query;
    this.form.areaId = areaId;
    this.form.acctMonth = acctMonth;
    this.getList();
  },
  methods: {
    getList() {
      this.tableLoading = true;
      $budgetAPI.getBudgetingDataDetailed(
        {
          ...this.form,
          token: getCookie("token")
        },
        (res) => {
          if (res && res.code == 0) {
            const { datas, heards, keys } = res.content;
            let keyIndex = 0;
            keys.splice(0, 1);
            heards.splice(0, 1);
            this.columns = [
              { label: "各单位财务指标预测完成表（万元）", 
              children: keys.splice(0,3).map((prop, i) => ({
                prop,
                label: heards[i],
              })) }
            ];
            heards.splice(0,3);
            if(keys.length > 0){
              keys.forEach((prop, i) => {
                this.columns.push({
                  label: heards[i],
                  prop,
                  minWidth: '150'
                })
              })
            }
            this.tableData = datas;
          }
          this.tableLoading = false;
        },
        err => {
          this.tableLoading = false;
        }
      );
    },
    handle_export() {
      downLoadExcelParams(
        "/budgetIncomeSecond/exportBudgetingDataDetailed",
        {...this.form, token: getCookie("token")}, 
        this.form.acctMonth + "预算编制详情"
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.operation, .tableBox {
  margin-top: 20px;
}
</style>
